/* eslint-disable react/jsx-max-depth */
import React, { useEffect, useState } from 'react';
import { connect, useDispatch } from 'umi';
import { Table, Row, Col, message } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import PageTopFormContent from '@/components/PageTopFormContent';
import PaginationCommon from '@/components/PaginationCommon';
import styles from './UserGroupDetail.less';

const UserGroupDetail = (props) => {
  const {
    groupDetailData,
    loading: { effects },
    onBack,
  } = props;
  const { id: groupId } = groupDetailData;
  const [currentPageNum, setcurrentPageNum] = useState(1);
  const [currentPageSize, setCurrenPageSize] = useState(10);
  const [userList, setUserList] = useState([]);
  const [userListTotal, setUserListTotal] = useState([]);
  const dispatch = useDispatch();

  const getTableData = () => {
    const currentData = {
      pageIndex: currentPageNum,
      pageSize: currentPageSize,
      groupId,
    };
    dispatch({
      type: 'userGroupManageModel/getEmployeeOfGroup',
      payload: currentData,
    }).then((res) => {
      const { code, data, message: errMsg } = res;
      if (code === 0 && data) {
        const { dataList, total } = data;
        setUserList(dataList);
        setUserListTotal(total);
      } else {
        message.error(errMsg);
      }
    });
  };

  useEffect(() => {
    if (groupId) {
      getTableData();
    }
  }, [groupId, currentPageNum, currentPageSize]);

  const handlePaginationChange = (page, pageSize) => {
    setcurrentPageNum(page);
    setCurrenPageSize(pageSize);
  };

  const columnsOrg = [
    {
      title: '员工工号',
      dataIndex: 'employeeCode',
      key: 'employeeCode',
    },
    {
      title: '用户帐号',
      dataIndex: 'userAccount',
      key: 'userAccount',
    },
    {
      title: '员工姓名',
      dataIndex: 'employeeName',
      key: 'employeeName',
    },
    {
      title: '组织信息',
      dataIndex: 'orgInfoList',
      key: 'orgInfoList',
      render: (orgList = [], row) => (
        <>
          {orgList
            .map((orgPath) => orgPath.map((org) => org.name).join(' > '))
            .map((orgPath, index) => (
              <>
                {index !== 0 && <br />}
                <span key={index}>{orgPath}</span>
              </>
            ))}
        </>
      ),
    },
    {
      title: '移动电话',
      dataIndex: 'mobilePhone',
      key: 'mobilePhone',
    },
  ];

  return (
    <div className={styles.root}>
      <PageTopFormContent
        title={
          <>
            <ArrowLeftOutlined onClick={onBack} style={{ marginRight: 16, cursor: 'pointer' }} />
            人员组详情
          </>
        }
      />
      <div className={styles.blockWrapper}>
        <div className={styles.title}>基本信息</div>
        <div className={styles.contentWrapper}>
          <Row gutter={[16, 16]}>
            <Col span={8}>
              <div>
                <span className={styles.labelTitle}>人员组编码：</span>
                {groupDetailData.groupCode}
              </div>
            </Col>
            <Col span={8}>
              <div>
                <span className={styles.labelTitle}>创建人：</span>
                <span>{groupDetailData.creatorName}</span>
              </div>
            </Col>
            <Col span={8}>
              <div>
                <span className={styles.labelTitle}>创建时间：</span>
                <span>{groupDetailData.gmtCreated}</span>
              </div>
            </Col>
            <Col span={8}>
              <div>
                <span className={styles.labelTitle}>人员组名称：</span>
                {groupDetailData.groupName}
              </div>
            </Col>
            <Col span={8}>
              <div>
                <span className={styles.labelTitle}>更新人：</span>
                <span>{groupDetailData.modifierName}</span>
              </div>
            </Col>
            <Col span={8}>
              <div>
                <span className={styles.labelTitle}>更新时间：</span>
                <span>{groupDetailData.gmtModified}</span>
              </div>
            </Col>
          </Row>
        </div>
      </div>
      <div className={styles.blockWrapper}>
        <div className={styles.title}>用户列表</div>
        <div className={styles.contentWrapper}>
          <Table
            columns={columnsOrg}
            dataSource={userList}
            pagination={false}
            loading={effects['userGroupManageModel/getEmployeeOfGroup']}
          />
          <PaginationCommon
            total={userListTotal}
            onChange={handlePaginationChange}
            style={{ textAlign: 'right' }}
            current={currentPageNum}
            pageSize={currentPageSize}
            showSizeChanger
            showQuckJumper
          />
        </div>
      </div>
    </div>
  );
};

export default connect((state) => state)(UserGroupDetail);
